<template>
  <div class="card-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <el-radio-group v-model="type" @change="changeType">
          <el-radio-button v-for="(item,i) in radioGroup"
                           :key="i"
                           :index="item.name"
                           :label="item.type"
          >
            {{item.name}}
          </el-radio-button>
        </el-radio-group>
        <el-button type="primary" @click="switchStatus">{{this.status}}</el-button>
      </div>
      <switch-chart :type="type" ref="charts"></switch-chart>
    </el-card>
  </div>
</template>

<script>
import SwitchChart from "../../../labor/SwitchChart";

export default {
  name: "AdminChartCard",
  components:{SwitchChart},
  data(){
    return{
      type:'paper',
      radioGroup:[
        {name:'论文数量',type:'paper'},
        {name:'评论总数',type:'comment'}
      ],
      //显示/隐藏
      status:'隐藏总计',
      isShow:true,
    }
  },

  methods: {
    changeType(value){
      this.type=value
    },

    switchStatus(){
      if(this.isShow){
        this.status='显示总计'
        this.isShow=false
        this.$refs.charts.switchState(this.isShow)
      }
      else{
        this.status='隐藏总计'
        this.isShow=true
        this.$refs.charts.switchState(this.isShow)
      }
    }
  }
}
</script>

<style scoped>
div{
  caret-color: transparent;
}
</style>
